<template>
  <div>
    <div class="chunk-header" :style="{ background: background }">
      <slot name="icon">
        <i v-fi="icon" class="chunk-icon" :class="[icon]"></i>
      </slot>
      <div class="value">
        <p>{{ title }}</p>
        <p class="header-tips">
          {{ description }}
        </p>
      </div>
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      // 尺寸  可选值：medium正常 / small小 / mini迷你
      type: String,
      default: "small",
    },
    title: {
      // 标题
      type: String,
      default: "标题",
    },
    description: {
      // 辅助性文本
      type: String,
      default: "Support Requests",
    },
    background: {
      // 背景颜色
      type: String,
      default: "white",
    },
    icon: {
      // 是否显示图标
      type: String,
      default: "",
    },
    round: {
      // 图标是否圆形
      type: Boolean,
      default: false,
    },
    padding: {
      type: String,
      default: "0px 20px 10px",
    },
  },
};
</script>

<style scoped>
.chunk-icon {
  font-size: 34px;
  color: gray;
  margin-right: 6px;
}
.chunk-icon-round {
  width: 35px;
  height: 35px;
  display: block;
  background-color: #82939c88;
}

.chunk-header {
  width: 100%;
  height: 60px;
  padding: 0px 18px;
  box-sizing: border-box;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.header-tips {
  font-size: 12px;
  margin-top: 3px;
  color: #82939c88;
}

.value {
  flex: 1;
}
</style>
